<template>
    <transition name="slide-fade">
        <div class="back-top" v-show="show" @click.stop="getTop">
            <div class="top-div">
                <i class="el-icon-location">{{num}}</i>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: "BackTop",
    data() {
        return {
            show: false,
            num:0,
        }
    },
    methods: {
        /*scroll() {
            // 页面总高 body监听
            var totalH = document.body.scrollHeight || document.documentElement.scrollHeight
            // 可视高
            var clientH = window.innerHeight || document.documentElement.clientHeight
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            console.log(scrollTop)
            this.num=scrollTop*100/(totalH-clientH)
            this.num=Math.round(this.num)
            if (scrollTop > 0) {
                this.show = true
            } else {
                this.show = false
            }
        },*/
        divScroll(){
            var mainDiv=document.getElementById("main-body");
            var totalH=mainDiv.scrollHeight;
            var clientH = mainDiv.offsetHeight;
            let scrollTop = mainDiv.scrollTop
            this.num=scrollTop*100/(totalH-clientH)
            this.num=Math.round(this.num)
            this.$store.state.scrollNum=this.num;
            if (scrollTop > 0) {
                this.show = true
            } else {
                this.show = false
            }
        },
        /*getTop() {
        // body 滚回去
            let timer = setInterval(() => {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                let speed = Math.ceil(scrollTop / 5)
                document.documentElement.scrollTop = scrollTop - speed
                if (scrollTop === 0) {
                    clearInterval(timer)
                    this.num=0
                }
            }, 20)
        }*/
        getTop() {
        // div 滚回去
            var mainDiv=document.getElementById("main-body");
            let timer = setInterval(() => {
                let scrollTop = mainDiv.scrollTop
                let speed = Math.ceil(scrollTop / 5)
                mainDiv.scrollTop = scrollTop - speed
                if (scrollTop === 0) {
                    clearInterval(timer)
                    this.num=0
                }
            }, 20)
        }
    },
    mounted() {
        var mainDiv=document.getElementById("main-body");
        mainDiv.addEventListener('scroll', this.divScroll)
    },
    beforeUnmount() {
        var mainDiv=document.getElementById("main-body");
        mainDiv.removeEventListener('scroll', this.divScroll);
    }
}
</script>

<style scoped lang="scss">
.top-div{
    padding: 3px 5px 3px 5px;
    background-image: linear-gradient(to right, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
    border-radius: 5px;
}
.back-top {
    background-color: transparent;
    position: fixed;
    right: 4rem;
    bottom: 1rem;
    border-radius: 25px;
    cursor: pointer;
    opacity: 1;
    transition: .3s;
    text-align: center;
    z-index: 99;
    i{
        font-size: 20px;
    }

}

@media (max-width: 600px) {
    .back-top {
        display: none;
    }
}
</style>
